<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>标签组管理器</title>
    <style>
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
          'SF Pro Icons', 'Helvetica Neue', sans-serif;
        background-color: #f2f2f7;
        margin: 0;
        padding: 16px;
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
      }
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;
      }
      .search-bar {
        display: flex;
        gap: 8px;
        background: white;
        padding: 8px;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }
      .search-input {
        flex: 1;
        border: 1px solid #e5e5ea;
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 14px;
      }
      .sort-select {
        border: 1px solid #e5e5ea;
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 14px;
      }
      .tab-groups {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 16px;
      }
      .tab-group {
        background-color: white;
        border-radius: 12px;
        padding: 14px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
      }
      .tab-group-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
      }
      .tab-group-title {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
      }
      .tab-count {
        font-size: 12px;
        color: #8e8e93;
      }
      .tab-group-actions {
        display: flex;
        gap: 6px;
      }
      .tab-list {
        margin-top: 10px;
        border-top: 1px solid #e5e5ea;
        padding-top: 10px;
      }
      .tab-item {
        display: flex;
        align-items: center;
        padding: 6px 0;
        border-bottom: 1px solid #e5e5ea;
      }
      .tab-item:last-child {
        border-bottom: none;
      }
      .tab-title {
        flex: 1;
        margin-left: 6px;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      button {
        border: none;
        border-radius: 6px;
        padding: 5px 10px;
        font-size: 13px;
        font-weight: 500;
        cursor: pointer;
        transition: background-color 0.2s;
        white-space: nowrap;
      }
      .primary-btn {
        background-color: #007aff;
        color: white;
      }
      .primary-btn:hover {
        background-color: #0051a8;
      }
      .danger-btn {
        background-color: #ff3b30;
        color: white;
      }
      .danger-btn:hover {
        background-color: #d70015;
      }
      .icon-btn {
        padding: 6px;
        background: transparent;
      }
      .icon-btn img {
        width: 16px;
        height: 16px;
        vertical-align: middle;
      }
      .favorite-btn {
        border: 1px solid #007aff;
      }
      .favorite-btn .icon {
        filter: invert(40%) sepia(93%) saturate(3832%) hue-rotate(199deg)
          brightness(102%) contrast(107%);
      }
      .favorite-btn.active {
        background-color: #007aff;
      }
      .favorite-btn.active .icon {
        filter: invert(1);
      }
      .batch-actions {
        margin-bottom: 20px;
        padding: 10px;
        background: white;
        border-radius: 10px;
        display: flex;
        gap: 10px;
        align-items: center;
      }
      .tab-group.selected {
        background-color: rgba(0, 122, 255, 0.05);
        border: 2px solid #007aff;
      }
      .filter-group {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-left: 10px;
      }
      .filter-group label {
        font-size: 14px;
        color: #8e8e93;
        user-select: none;
        display: flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
      }
      .filter-group input[type='checkbox'] {
        width: 16px;
        height: 16px;
        margin: 0;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">
        <h1>标签组管理器</h1>
        <div class="search-bar">
          <input
            type="text"
            class="search-input"
            placeholder="搜索标签组或标签页..."
            id="searchInput"
          />
          <select class="sort-select" id="sortSelect">
            <option value="time-desc">时间 (最新)</option>
            <option value="time-asc">时间 (最早)</option>
            <option value="name-asc">名称 (A-Z)</option>
            <option value="name-desc">名称 (Z-A)</option>
            <option value="tabs-desc">标签数 (多到少)</option>
            <option value="tabs-asc">标签数 (少到多)</option>
          </select>
          <div class="filter-group">
            <label>
              <input type="checkbox" id="favoriteFilter" />
              <img src="images/icons/star.svg" alt="收藏" class="icon" />
              仅显示收藏
            </label>
          </div>
        </div>
      </div>
      <div class="batch-actions">
        <button class="primary-btn" id="selectAllBtn">全选</button>
        <button class="danger-btn" id="deleteSelectedBtn">删除选中</button>
        <button class="primary-btn" id="mergeSelectedBtn">合并选中</button>
        <button class="primary-btn" id="exportSelectedBtn">导出选中</button>
        <input type="file" id="importFileInput" accept=".json" style="display: none;" />
      </div>
      <div id="tabGroups" class="tab-groups"></div>
    </div>
    <script type="module" src="manager.js"></script>
  </body>
</html>
